<template>
    <div class="mine">
        <div class="header">
            <div class="tool">
                <van-icon name="setting-o" size="24" @click="toSetting" />
            </div>
            <div class="user-info">
                <van-image round width="5rem" height="5rem" fit="cover" :src="userInfo.avatar?userInfo.avatar:'https://img01.yzcdn.cn/vant/cat.jpeg'"><template v-slot:error>加载失败</template></van-image>
                <div class="username">{{userInfo.nickname}}</div>
            </div>
        </div>
        <van-grid :column-num="3">
            <van-grid-item icon="service-o" text="我的反馈" to="/mine/feedback" />
            <van-grid-item icon="wap-home-o" text="我的房屋" to="/mine/house" />
            <van-grid-item icon="logistics" text="我的车位" to="/mine/stall" />
        </van-grid>
        <Tabbar />
    </div>
</template>

<script>
import Tabbar from "../component/tabbar";
export default {
    name: "mine",
    components: {
        Tabbar,
    },
    data() {
        return {
            userInfo: {},
        };
    },
    mounted() {
        this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    },
    methods: {
        toSetting() {
            this.$router.push({ name: "mine.setting" });
        },
    },
};
</script>
<style lang='less' scoped>
.mine {
    min-height: calc(100vh - 56px);
    .header {
        height: 10rem;
        background: #1976d2;
        .tool {
            padding: 0.5rem;
            display: flex;
            justify-content: flex-end;
        }
        .user-info {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-left: 1rem;
            .username {
                color: #fff;
                margin-left: 1rem;
            }
        }
    }
}
</style>
